<template>
  <div class="repairDetail">
    <van-nav-bar title="设备维修详情" left-arrow="" @click-left='goBack()'>
    </van-nav-bar>
    <van-search placeholder="搜索设备名称" @input='getObscureDevice' v-model="searchData" :show-action='true'>
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <van-overlay :show="show" @click="show = false">
      <van-cell @click='getDeviceName(item.facilityname,item.id)' v-for="(item,i) in alldeviceList" :key='i' :title="item.facilityname"></van-cell>
    </van-overlay>
    <div class="keepCard" v-for="(item,i) in repaireList" :key='i'>
      <div class="info">
        <van-cell-group>
          <div class="numCell">
            <van-cell :border="false" title="维修单号" title-class="numTitle" :value="item.id" value-class='num'></van-cell>
          </div>
          <van-cell title="设备编号" :value="item.facilityid" />
          <van-cell title="设备名称" :value="item.facilityName" />
          <van-cell title="设备区域" :value="item.areaname"></van-cell>
          <van-cell title="故障发起人" :value="item.submitusername" />
          <van-cell title="发起时间" :value="item.starttime" />
          <van-cell title="故障内容" :value="item.abromalcontent" />
          <van-cell title="状态" value="完成维修" />
          <van-cell title="更换部件" :value="item.parts"></van-cell>
					<van-cell title="维修内容" :value="item.content" />
          <van-cell title="维修周期(天)" :value="10" />
          <van-cell title="维修时间" :value="item.endtime" />
          <van-cell title="维修员" :value="item.maintanceusername" />

        </van-cell-group>
      </div>
    </div>

  </div>
</template>

<script>
	import {Toast} from 'vant'
  export default {
    data() {
      return {
        show:false,
        searchData: '',
				deviceId:'',
				repaireList:[],
        alldeviceList:[]
      }
    },
		created(){
			this.getRepairInfo()
		},
		watch:{
			searchData(newVal){
        this.show = true
				if(!newVal) this.getRepairInfo()
			}
		},
    methods: {
      //根据输入的设备名字获得具体的设备名称
      getDeviceName(name,id){
        this.searchData = name
        this.num = id
        this.onSearch()
      },
      //模糊查询获得设备列表
      getObscureDevice(){
        this.$axios.post('/Maintenance/obscureFacility.do',{facilityName:this.searchData}).then(res=>{
          if(res.data.status === 200){
            this.alldeviceList = res.data.msg
          }
        })
      },
			getRepairInfo(){
				this.repaireList = []
				//this.deviceId = this.$route.params.id
				this.$axios.post('/Maintenance/selectMaintenance.do',{facilityName:this.$route.params.facilityName,id:this.searchData,starttime:'',endtime:''}).then(res=>{
					if(res.data.status ===200){
						res.data.msg.forEach(item=>{
							if(item.state === 3){
								this.repaireList.push(item)
							}
						})
						if(this.repaireList.length === 0){
							Toast.fail({message:'暂无数据',duration:900})
						}
						console.log(this.repaireList)
					}
				})
			},
      onSearch() {
        this.$axios.post('/Maintenance/selectMaintenance.do',{facilityName:this.searchData}).then(res=>{
          if(res.data.status === 200){
            this.repaireList = res.data.msg
          }
        })
      },
      goEditRepair() {
        this.$router.push({
          name: 'editRepair'
        })
      }

    }
  }
</script>

<style scoped="scoped">
  .van-overlay {
    top: 6.8rem;
  }
	.numTitle{
		flex: .2;
	}
  .van-cell {
    padding: .3rem 1rem !important;
    color: #969799;
  }

  .numCell {
		padding-top: .4rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #EEEEEE;
  }

  .num {
    font-size: .9rem;
    color: #222;
    font-weight: bold;
  }

  .keepCard {
    padding: .6rem;
  }

  .keepCard .van-cell {
    font-size: .7rem;
    line-height: 1rem;
  }

  .info {
    box-shadow: 2px 2px 5px #ADADAD;
  }
</style>
